<script>
//以下需要引入：
import * as PIXI from 'pixi.js';
import {Live2DModel} from 'pixi-live2d-display/cubism4';
window.PIXI = PIXI; // 为了pixi-live2d-display内部调用
let app; // 为了存储pixi实例
let model; // 为了存储live2d实例
let mouthAnimationId; // 用于存储口型动画的ID
 
export default {
  data() {
    return {
      mouthParam:null,
      isTalking: false,
      mouthSpeed: 0.01, // 张嘴速度（数值越小越慢）
      talkingDuration: 2000, // 说话持续时间(毫秒)
    }
  },
  
//需要引入：
  async mounted() {
    app = new PIXI.Application({
      view: this.$refs.liveCanvas,//ref组件绑定，liveCanvas为下文自定义的
      autoStart: true,            //是否开启自动播放
      resizeTo: window,           
      backgroundAlpha: 0,  //透明度
    });
 
    // 这里是放live2d资源的地方，public目录中的文件会被服务到根路径
    // this.mouthParam = 'PARAM_MOUTH_OPEN_Y';
    // model = await Live2DModel.from('/shizuku/runtime/shizuku.model3.json');

    this.mouthParam = 'ParamMouthOpenY';
    model = await Live2DModel.from('/hiyori_pro_zh/runtime/hiyori_pro_t11.model3.json');

 
    app.stage.addChild(model);
    model.scale.set(0.2); // 调整缩放比例,0.1-0.2整体比较合适

    
    
  },
  
  methods: {
    // 切换说话状态
    toggleTalking() {
      if (this.isTalking) {
        this.stopTalking();
      } else {
        this.startTalking();
      }
    },
    
    // 开始说话
    startTalking() {
      this.isTalking = true;
      this.animateMouth();
    },
    
    // 停止说话
    stopTalking() {
      this.isTalking = false;
      this.stopMouthAnimation();
      // 确保嘴巴完全闭上
      if (model && model.internalModel) {
        const coreModel = model.internalModel.coreModel;
        coreModel.setParameterValueById(this.mouthParam, 0);
        coreModel.update();
      }
    },
    
    // 说"你好"
    sayHello() {
      this.startTalking();
      // 2秒后自动停止
      setTimeout(() => {
        this.stopTalking();
      }, this.talkingDuration);
    },
    
    // 张嘴说话动画
    animateMouth() {
      if (!this.isTalking) return;
      
      if (model && model.internalModel) {
        const coreModel = model.internalModel.coreModel;
        const currentMouthValue = coreModel.getParameterValueById(this.mouthParam);
        
        // 使用正弦波创建更自然的说话效果；用 mouthSpeed 控制速度
        const time = Date.now() * this.mouthSpeed;
        const mouthValue = Math.abs(Math.sin(time)) * 0.5; // 0-0.5 之间变化
        console.log(mouthValue);
        coreModel.setParameterValueById(this.mouthParam, mouthValue);
        coreModel.update();
      }
      
      mouthAnimationId = requestAnimationFrame(() => this.animateMouth());
    },
    
    // 停止张嘴动画
    stopMouthAnimation() {
      if (mouthAnimationId) {
        cancelAnimationFrame(mouthAnimationId);
        mouthAnimationId = null;
      }
    },

    // 播放 Flick 动作
    playFlick() {
      if (model) {
        model.motion('Flick');
      }
    },

    // 播放 FlickDown 动作
    playFlickDown() {
      if (model) {
        model.motion('FlickDown');
      }
    },

    // 播放 FlickUp 动作
    playFlickUp() {
      if (model) {
        model.motion('FlickUp');
      }
    },

    // 播放 Tap 动作
    playTap() {
      if (model) {
        model.motion('Tap');
      }
    },

    // 播放 Tap@Body 动作
    playTapBody() {
      if (model) {
        model.motion('Tap@Body');
      }
    },

    // 播放 Flick@Body 动作
    playFlickBody() {
      if (model) {
        model.motion('Flick@Body');
      }
    }
  },
  
//需要引入
  beforeUnmount() {
    this.stopMouthAnimation();
    model?.destroy();
    app?.destroy();
  }
}
</script>
<template>
  <div class="app">
<!-- 自定义ref="liveCanvas"： -->
     <canvas ref="liveCanvas"></canvas>
     
     <!-- 控制按钮 -->
     <div class="controls">
       <button @click="toggleTalking" class="control-btn">
         {{ isTalking ? '停止说话' : '开始说话' }}
       </button>
       <button @click="sayHello" class="control-btn">说"你好"</button>
       <button @click="stopTalking" class="control-btn">闭嘴</button>
       <button @click="playFlick" class="control-btn">Flick 动作</button>
       <button @click="playFlickDown" class="control-btn">FlickDown</button>
       <button @click="playFlickUp" class="control-btn">FlickUp</button>
       <button @click="playTap" class="control-btn">Tap</button>
       <button @click="playTapBody" class="control-btn">Tap@Body</button>
       <button @click="playFlickBody" class="control-btn">Flick@Body</button>
     </div>
  </div>
</template>
 
<style scoped>

.app{
  background-color: #f1e6aa;
  /* position: relative; */
}

header {
  line-height: 1.5;
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1000;
}

.control-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.control-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
</style>